<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/4/27
  Time: 10:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%-- 引入css和js--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.8.1/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/static/layui-v2.8.1/layui/layui.js"></script>
<%--    <script src="${pageContext.request.contextPath}/static/layui-v2.8.1/layui/js/treeTable.js"></script>--%>

</head>
<body>

<table class="layui-hide" id="ID-treeTable-demo"></table>

<%-- 添加菜单--%>
<form class="layui-form" action="" id="myform" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名</label>
        <div class="layui-input-block">
            <input type="text" name="mname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">url路径</label>
        <div class="layui-input-block">
            <input type="text" name="url" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label  class="layui-form-label">菜单图标</label>
        <div class="layui-input-block">
            <input type="text" id="iconPicker2" name="icon" value="layui-icon-face-smile-fine" lay-filter="iconPicker2"
                   class="hide">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">父级菜单</label>
        <div class="layui-input-block">
            <select name="pid" lay-filter="aihao">
            </select>
        </div>
    </div>




    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>





<script type="text/html" id="TPL-treeTable-demo">
    <div class="layui-btn-container">
        <%-- 添加一级菜单的页面--%>
        <button class="layui-btn layui-btn-sm" lay-event="addMenu">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>

    </div>
</script>
<script type="text/html" id="TPL-treeTable-demo-tools">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
    </div>
</script>
<script>

    layui.config({
        base: '${pageContext.request.contextPath}/static/js/' //假设这是你存放拓展模块的根目录
    }).extend({ //设定模块别名
        iconPicker: 'iconPicker' //如果 mymod.js 是在根目录，也可以不用设定别名

    });

    layui.use(['iconPicker'],function(){
        var treeTable = layui.treeTable;
        var layer = layui.layer;
        var dropdown = layui.dropdown;
        var form = layui.form;
        var $ = layui.jquery;


        // 渲染图标
        //var $ = layui.$

        var iconPicker = layui.iconPicker;

        //图标查看器
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker2',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });

        // 提交事件
        form.on('submit(demo1)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });
        // 渲染
        var inst = treeTable.render({
            elem: '#ID-treeTable-demo',

           // url: '/static/json/treeTable/demo-1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
            url:"${pageContext.request.contextPath}/static/data/treedata.json",
            tree: {
                // 跟默认的配置不一样的时候的配置信息
                customName: {
                    name: "title"
                }
                /*
                // 异步加载子节点
                async: {
                  enable: true,
                  url: '/static/json/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
                  autoParam: ["parentId=id"]
                }
                */
            },
            maxHeight: '501px',
            toolbar: '#TPL-treeTable-demo',
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID',sort: true, fixed: 'left'},
                {field: 'title', title: '菜单名字',fixed: 'left'},

                { fixed: "right", title: "操作", width: 181, align: "center", toolbar: "#TPL-treeTable-demo-tools"}
            ]],
            page: true
        });
        // 表头工具栏工具事件
        treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
            var config = obj.config;
            var tableId = config.id;
            var status = treeTable.checkStatus(tableId);
            // 获取选中行
            if (obj.event === "getChecked") {
                if(!status.data.length) return layer.msg('无选中数据');
                console.log(status);
                layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
            }
            if (obj.event === "addMenu") {
               // 打开一个layer  然后可以填数据
                layer.open({
                    title: '添加',
                    type: 1,
                    area: ['500px','500px'],
                    offset: '50px',
                    content: $("#myform")


                });
                return false;
            }
        });
        // 单元格工具事件
        treeTable.on('tool(ID-treeTable-demo)', function (obj) {
            var layEvent = obj.event; // 获得 lay-event 对应的值
            var trElem = obj.tr;
            var trData = obj.data;
            var tableId = obj.config.id;
            if (layEvent === "detail") {
                layer.msg("查看操作：" + trData.name);
            } else if (obj.event === "addChild") {

                console.log(trData)
                // var data = { id: Date.now(), name: "新节点" };
                // //
                // // alert("添加新的节点");
                // var newNode2 = treeTable.addNodes(tableId, {
                //     parentIndex: trData["LAY_DATA_INDEX"],
                //     index: -1,
                //     data: data
                // });
            } else if (layEvent === "more") {
                // 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    align: "right", // 右对齐弹出
                    data: [
                        {
                            title: "修改名字",
                            id: "edit"
                        },
                        {
                            title: "删除",
                            id: "del"
                        }
                    ],
                    click: function (menudata) {
                        if (menudata.id === "del") {
                            layer.confirm("真的删除行么", function (index) {
                                obj.del(); // 等效如下
                                // treeTable.removeNode(tableId, trElem.attr('data-index'))
                                layer.close(index);
                            });
                        } else if (menudata.id === "edit") {
                            layer.prompt({
                                value: trData.title,
                                title: "输入新的名字"
                            }, function (value, index) {
                                obj.update({ title: value }); // 等效如下
                                // treeTable.updateNode(tableId, trElem.attr('data-index'), {experience: value});
                                layer.close(index);
                            });
                        }
                    }
                });
            }
        });
    });
</script>
</body>
</html>
